<template>
  <el-dialog
    :title="title"
    :visible.sync="show"
    width="900px"
    center
    append-to-body
  >
    <div class="content-box">
      <div class="left-tree">
        <el-table
          :data="treeData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          highlight-current-row
          default-expand-all
          :tree-props="{children: 'nodes', hasChildren: 'hasChildren'}"
          @current-change="handleNodeClick"
        >
          <el-table-column
            prop="name"
            label="材料分类"
          />
        </el-table>
      </div>
      <div class="right-content">
        <div class="top-table-content">
          <com-table
            highlight-current-row
            :data="tableData"
            :columns="tableColumn"
            @pageChange="pageChange"
          >
            <template v-slot:devStatus="{ row: { devStatus } }">
              {{ getDictName(consumableLedgerDevStatus, devStatus) }}
            </template>
            <template v-slot:devSource="{ row: { devSource } }">
              {{ getDictName(consumableLedgerDevSource, devSource) }}
            </template>
            <template v-slot:techStatus="{ row: { techStatus } }">
              {{ getDictName(consumableLedgerTechStatus, techStatus) }}
            </template>
            <template v-slot:factoryTime="{ row: { factoryTime } }">
              {{ dateFormat(factoryTime) }}
            </template>
            <template v-slot:payTime="{ row: { payTime } }">
              {{ dateFormat(payTime) }}
            </template>
            <template v-slot:monitorDevice="{ row: { monitorDevice } }">
              {{ getDictName(consumableLedgerMonitorDevice, monitorDevice) }}
            </template>
            <template v-slot:specialDevice="{ row: { specialDevice } }">
              {{ getDictName(consumableLedgerSpecialDevice, specialDevice) }}
            </template>
            <template v-slot:professionalDevice="{ row: { professionalDevice } }">
              {{ getDictName(consumableLedgerProfessionalDevice, professionalDevice) }}
            </template>
            <template v-slot:amTime="{ row: { amTime } }">
              {{ dateFormat(amTime) }}
            </template>
            <template v-slot:createTime="{ row: { createTime } }">
              {{ dateFormat(createTime) }}
            </template>
            <template v-slot:options="{row}">
              <el-button type="success" size="mini" @click="addToTarget(row)">添加</el-button>
            </template>
          </com-table>
        </div>
        <div class="action-btns">
          <!-- <el-button type="primary">添加</el-button>
          <el-button type="danger">删除</el-button> -->
        </div>
        <div class="bottom-table-content">
          <com-table
            :data="targetList"
            :columns="tableColumn"
            :total="total"
            :no-page="true"
            @getSelectedRows="getSelectedRows"
          >
            <template v-slot:devStatus="{ row: { devStatus } }">
              {{ getDictName(consumableLedgerDevStatus, devStatus) }}
            </template>
            <template v-slot:devSource="{ row: { devSource } }">
              {{ getDictName(consumableLedgerDevSource, devSource) }}
            </template>
            <template v-slot:techStatus="{ row: { techStatus } }">
              {{ getDictName(consumableLedgerTechStatus, techStatus) }}
            </template>
            <template v-slot:factoryTime="{ row: { factoryTime } }">
              {{ dateFormat(factoryTime) }}
            </template>
            <template v-slot:payTime="{ row: { payTime } }">
              {{ dateFormat(payTime) }}
            </template>
            <template v-slot:monitorDevice="{ row: { monitorDevice } }">
              {{ getDictName(consumableLedgerMonitorDevice, monitorDevice) }}
            </template>
            <template v-slot:specialDevice="{ row: { specialDevice } }">
              {{ getDictName(consumableLedgerSpecialDevice, specialDevice) }}
            </template>
            <template v-slot:professionalDevice="{ row: { professionalDevice } }">
              {{ getDictName(consumableLedgerProfessionalDevice, professionalDevice) }}
            </template>
            <template v-slot:amTime="{ row: { amTime } }">
              {{ dateFormat(amTime) }}
            </template>
            <template v-slot:createTime="{ row: { createTime } }">
              {{ dateFormat(createTime) }}
            </template>
            <template v-slot:options="{row}">
              <el-button type="danger" size="mini" @click="deleteTarget(row)">删除</el-button>
            </template>
          </com-table>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  otherPriceDescTypes,
  consumableLedgerDevStatus,
  consumableLedgerDevSource,
  consumableLedgerTechStatus,
  consumableLedgerMonitorDevice,
  consumableLedgerSpecialDevice,
  consumableLedgerProfessionalDevice
} from '@/utils/dicData'
import { getDictName } from '@/utils/comm'
import moment from 'moment'
export default {
  name: 'MaterialListModal',
  components: {

  },
  props: {
    title: {
      type: String,
      default: ''
    },
    showModal: {
      type: Boolean,
      default: false
    },
    checkLock: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default() {
        return []
      }
    },
    apiObj: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      getDictName,
      consumableLedgerDevStatus,
      consumableLedgerDevSource,
      consumableLedgerTechStatus,
      consumableLedgerMonitorDevice,
      consumableLedgerSpecialDevice,
      consumableLedgerProfessionalDevice,
      otherPriceDescTypes,
      visible: false,
      dataList: [],
      name: '',
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      treeData: [], // 树列表
      tableData: [], // 表格列表
      targetList: [], // 选中材料
      // selectRow: null,
      tableColumn: [
        {
          label: '资产编号',
          prop: 'assetNumber'
        },
        {
          label: '资产单位',
          prop: 'assetUnit'
        },
        {
          label: '车牌号',
          prop: 'plateNumber'
        },
        {
          label: '设备编号',
          prop: 'devNumber'
        },
        {
          label: '设备名称',
          prop: 'devName'
        },
        {
          label: '设备分类',
          prop: 'devCategory'
        },
        {
          label: '设备状态',
          prop: 'devStatus',
          slot: 'devStatus'
        },
        {
          label: '设备来源',
          prop: 'devSource',
          slot: 'devSource'
        },
        {
          label: '设备功率',
          prop: 'devPower'
        },
        {
          label: '规格',
          prop: 'specification'
        },
        {
          label: '所在地',
          prop: 'address'
        },
        {
          label: '技术状况',
          prop: 'techStatus',
          slot: 'techStatus'
        },
        {
          label: '厂家编号',
          prop: 'factoryNumber'
        },
        {
          label: '厂家名称',
          prop: 'factoryName'
        },
        {
          label: '出厂时间',
          prop: 'factoryTime',
          slot: 'factoryTime',
          width: '90'
        },
        {
          label: '设计能力',
          prop: 'designAbility'
        },
        {
          label: '购买时间',
          prop: 'payTime',
          slot: 'payTime',
          width: '90'
        },
        {
          label: '机长',
          prop: 'captain'
        },
        {
          label: '外形尺寸',
          prop: 'size'
        },
        {
          label: '发动机编号',
          prop: 'engineNumber'
        },
        {
          label: '重量',
          prop: 'weight'
        },
        {
          label: '底盘号',
          prop: 'chassisNumber'
        },
        {
          label: '是否监视测量仪器',
          prop: 'monitorDevice',
          slot: 'monitorDevice'
        },
        {
          label: '是否特种设备',
          prop: 'specialDevice',
          slot: 'specialDevice'
        },
        {
          label: '是否大型专用设备',
          prop: 'professionalDevice',
          slot: 'professionalDevice'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '购置原值',
          prop: 'payAmount'
        },
        {
          label: '重置原值',
          prop: 'resetAmount'
        },
        {
          label: '规定折旧月数',
          prop: 'oldMonth'
        },
        {
          label: '使用月数',
          prop: 'useMonth'
        },
        {
          label: '净值',
          prop: 'netValue'
        },
        {
          label: '残值',
          prop: 'residualValue'
        },
        {
          label: '残值率',
          prop: 'residualRate'
        },
        {
          label: '剩余折旧月数',
          prop: 'remainMonth'
        },
        {
          label: '累计折旧值',
          prop: 'totalOldValue'
        },
        {
          label: '辅机名称',
          prop: 'amName'
        },
        {
          label: '辅机型号',
          prop: 'amModel'
        },
        {
          label: '辅机厂家',
          prop: 'amFactory'
        },
        {
          label: '辅机功率',
          prop: 'amPower'
        },
        {
          label: '辅机编号',
          prop: 'amNumber'
        },
        {
          label: '辅机出厂时间',
          prop: 'amTime',
          slot: 'amTime',
          width: '90'
        },
        {
          label: '图片',
          prop: 'image'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        },
        {
          label: '操作',
          prop: 'options',
          slot: 'options',
          fixed: 'right'
        }
      ]
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    showModal: {
      handler(newData) {
        if (newData) {
          this.initTree()
        } else {
          this.targetList = []
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    deleteTarget(obj) {
      this.targetList.map((item, m) => {
        if (item.id === obj.id) {
          this.targetList.splice(m, 1)
        }
      })
    },
    addToTarget(obj) {
      if (this.checkLock && obj.lockDevice) {
        this.$message({
          type: 'error',
          message: '机械设备使用中'
        })
        return
      }
      this.targetList.push({ ...obj, number: obj.code })
    },
    confirm() {
      this.show = false
      if (this.targetList.length > 0) {
        const tempData = JSON.parse(JSON.stringify(this.targetList))
        this.$emit('getSelectedRows', tempData)
      }
    },
    getSelectedRows(data) {
      this.targetList = data
    },
    pageChange(data) {
      this.pageParams = data
      this.getTableList(this.directCurrentNode)
    },
    // 获取树结构目录
    initTree() {
      this.apiObj['tree']().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
        if (nodes && nodes.length > 0) {
          this.getTableList(nodes[0])
        }
      })
    },
    // 材料目录相关
    handleNodeClick(val) {
      this.directCurrentNode = val
      this.getTableList(val)
    },
    // 获取材料表格数据
    getTableList(data) {
      const { id, code } = data
      if (id) {
        const params = {
          'machineDeviceDirectoryId': id,
          // 'name': name,
          'code': code,
          'pageNum': 0,
          'pageSize': 10
        }
        this.apiObj['list'](params).then(res => {
          const { data, total } = res.data || {}
          if (data) {
            this.tableData = res.data.data
            this.total = total - 0
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.com-form-title{
  font-size: 14px;
  font-weight: bold;
  line-height: 35px;
  color: #409EFF;
  border-bottom: 1px solid #dedede;
  margin-bottom: 6px;
}
::v-deep .content-box{
  overflow: hidden;
  .left-tree{
    width: 200px;
    float: left;
    max-height:600px;
    overflow-y: auto;
  }
  .right-content{
    width: calc(100% - 210px);
    float: right;
    .top-table-content{
      min-height: 200px;
    }
    // .action-btns{
    //   padding: 10px;
    // }
    .bottom-table-content{
      min-height: 200px;
    }
  }
}
</style>
